<template>
  <el-form
    ref="form"
    :model="formData"
    v-bind="$attrs"
    :rules="rules"
    :label-width="labelWidth"
    v-on="$listeners"
  >
    <template v-for="(v, idx) of formFormat">
      <div v-if="v.template === 'object'" :key="idx" class="flex-align-center flex-wrap">
        <ZformItem
          v-for="single of v.children"
          :key="single.value"
          :style="{marginRight:(v.marginRight||'20px')}"
          :form-model="formData"
          :v="single"
        >
          <template v-for="slot of objectSlotList" v-slot:[slot.slotName||slot.suffix]="{item: vs}">
            <slot v-if="slot.value===single.value" :name="slot.slotName" :item="vs" />
          </template>
        </ZformItem>
      </div>
      <ZformItem v-else :key="idx" :form-model="formData" :v="v">
        <template v-for="slot of slotList" v-slot:[slot.slotName||slot.suffix]="{item: vs}">
          <slot v-if="slot.value===v.value" :name="slot.slotName||slot.suffix" :item="vs" />
        </template>
      </ZformItem>
    </template>
  </el-form>
</template>

<script>
import ZformItem from './ZformItem'
export default {
  name: 'Zform',
  components: { ZformItem },
  props: {
    formFormat: { // 格式
      type: Array,
      default() {
        return []
      }
    },
    formData: { // 结果
      type: Object,
      default() {
        return {}
      }
    },
    labelWidth: {
      type: String,
      default: '80px'
    }
  },
  computed: {
    rules() {
      return this.inner_disposeRules(this.formFormat)
    },
    slotList() {
      if (!this.formFormat) return []
      const otherArr = []
      const mainArr = this.formFormat.filter(v => {
        if (v.template === 'slot' && v.suffix) {
          otherArr.push({
            value: v.value,
            suffix: v.suffix
          })
        }
        return v.template === 'slot' || v.suffix
      })
      return [...mainArr, ...otherArr]
    },
    objectSlotList() {
      if (!this.formFormat) return []
      let result = []
      this.formFormat.forEach(v => {
        if (v.children) {
          const otherArr = []
          const mainArr = v.children.filter(c => {
            if (c.template === 'slot' && c.suffix) {
              otherArr.push({
                value: c.value,
                suffix: c.suffix
              })
            }
            return c.template === 'slot' || c.suffix
          })
          result = [...result, ...mainArr, ...otherArr]
        }
      })
      return result
    }
  },
  methods: {
    validate(...args) {
      return this.$refs.form.validate(...args)
    },
    clearValidate(...args) {
      return this.$refs.form.clearValidate(...args)
    },
    resetFields() {
      this.$refs.form.resetFields()
    },
    inner_disposeRules(list = []) {
      let resule = {}
      list.forEach(v => {
        const key = v.value
        if (key) {
          resule[key] = [{
            required: v.hidden ? false : !v.noRequired,
            message: v.message || `请输入${v.label}`,
            trigger: v.trigger || 'blur'
          }]
        } else if (v.children) {
          const b = this.inner_disposeRules(v.children)
          resule = { ...b }
        }
      })
      return resule
    }
  }
}
</script>
<style lang="scss" scoped>
.flex-align-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}
</style>
